<template>
	<view class="page-bg">

		<u-navbar :autoBack="true" :border="false" :placeholder="true">
		
			<view slot="center" class="fb c3 f16">
				结算详情
			</view>
			<view slot="right">
				<image src="../images/refresh.svg" style="width: 25px;height: 25px;" @click="refresh()"></image>
			</view>
		</u-navbar>
		<view class="container">
			<view class="content-bg p12 mt10">
				<view class="c3 fb f16 ">
					订单信息
				</view>
				<view class="divider-line mb10 mt10" />
				<view class="f-s-b">
					<view class="c6 f14 mt10">
						订单编号：
					</view>
					<view class="fb f14 c3">
						{{info.orderNo||''}}
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						创建时间：
					</view>
					<view class="fb f14 c3">
						{{info.createTime||''}}
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						预约订单id：
					</view>
					<view class="fb f14 c3">
						{{info.appointOrderId||''}}
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						结算总重量：
					</view>
					<view class="fb f14 c3">
						{{info.weightTal||''}}
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						结算总金额：
					</view>
					<view class="fb f14 c3">
						{{info.amountTal||''}}
					</view>
				</view>
				<!-- <view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						支付图片：
					</view>
					<view class="fb f14 c3">
						{{info.imgUrl}}
					</view>
				</view> -->
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						结算状态：
					</view>
					<view class="fb f14 c3">
						{{info.status | statusTxt}}
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						创建时间：
					</view>
					<view class="fb f14 c3">
						{{info.createTime ||''}}
					</view>
				</view>

				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						支付方式：
					</view>
					<view class="fb f14 c3">
						{{info.payType | payTypeTxt }}
					</view>
				</view>



			</view>
			<!-- <view class="mt10 p10 b-rd b-s f-s-b " v-for="it,ix in info.hsUserWasteVoList" @click="delgoods(it)"> -->
			<view class="mt10 p10 b-rd b-s f-s-b " v-for="it,ix in info.hsUserWasteVoList">
				<!-- <image :src="it.imgUrl ?it.imgUrl: '../../static/huishou/pro2.png' " style="width:140rpx ;" mode="widthFix"></image> -->
				<view class="f-c" style="height: 144rpx;width:144rpx;">
					<u-album singleSize='70' :urls="[it.imgUrl]"></u-album>

				</view>
				<view class="f-f-c f1 ml10">
					<span>{{it.categorizeName}}</span>
					<span class="c9 f14 mt10">{{Number(it.weight).toFixed(2)}}kg
						X{{Number(it.price).toFixed(2)}}元/kg</span>
					<span class="cr fb mt10">￥ {{it.amount}}</span>
				</view>
				<view class="">
					<!-- <u-icon name="minus-circle" color="red" size="24"></u-icon> -->
				</view>
			</view>

			<view class="f" style="margin-top: 40px;">
				<view class="cancel-circle-btn f1" style="height: 50px;"
					v-if="info.status == 0 || info.status == 2 || info.status == 5 " @click="updateOrder(6)">
					取消订单
				</view>
				<view class="sure-circle-btn f1 ml20" style="height: 50px;" v-if="info.status == 1"
					@click="updateOrder(3)">
					确认支付
				</view>
				<view class="sure-circle-btn f1 ml20" style="height: 50px;" v-if="info.status == 2||info.status==5"
					@click="editOrder()">
					编辑
				</view>

			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				id: '',

			}

		},

		onLoad(option) {
			if (option.id) {
				this.id = option.id
				this.getSettleOrder(option.id)
			}
		},
		onShow() {
			if (this.id) {
				this.getSettleOrder(this.id)
			}
		},
		methods: {
			editOrder() {
				uni.navigateTo({
					url: '/pagesA/order/edit-order?id=' + this.id
				})
			},
			refresh() {
				if (this.id) {
					uni.showLoading({
						
					})
					this.getSettleOrder(this.id)
				}
			},
			getSettleOrder(id) {

				let that = this
				that.request("get", "riderAppOrder/app/getSettleOrderBy/" + id, uni.getStorageSync('token')).then(
					res => {
						if (res.code === 200) {
							that.info = res.data
							if(!that.info){
								uni.showToast({
									title: '请先进行订单结算',
									icon:'error',
									mask: true
								})
								// that.message('请先进行订单结算')
							}
						}
						uni.hideLoading()
					})
			},
			updateOrder(status) {
				let that = this
				if (status == 0) {
					that.statusFn(status)
				} else if (status == 3) {
					// 上传支付图片地址
					that.info.imgUrl = ''
					that.statusFn(status)
				} else if (status == 6) {
					// 重新编辑
					that.statusFn(status)
				}

			},
			statusFn(status) {

				let that = this
				let params = that.info
				params.status = status
				that.request("put", "riderAppOrder/app/dealSettleOrderByRider", uni.getStorageSync('token'),
					params).then(
					res => {
						if (res.code === 200) {
							that.getSettleOrder(that.id)
							uni.showToast({
								title: '操作成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 500)
						}
						uni.hideLoading()
					})
			},
			delgoods(item) {
				if (this.info.hsUserWasteVoList.length == 1) {
					uni.showToast({
						title: '最少有一个商品',
						icon: 'none'
					})
					return
				}
				let that = this

				that.request("delete", "riderAppOrder/app/delHsWasteById/" + item.id, uni.getStorageSync('token'),
					item).then(
					res => {
						if (res.code === 200) {
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							})
							that.getSettleOrder(that.id)
						}
						uni.hideLoading()
					})
			}

		}
	}
</script>


<style>
	.top-bg {
		height: 80px;
		background: #18C387;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
	}

	.content-bg {
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
	}
</style>